<template>
  <template v-for="(item, index) in data">
    <div class="m-x-8" v-if="index !== 0 && dataIndex === 0">
      <el-divider />
    </div>
    <div class="tr">
      <div class="td">
        <div :style="{
          paddingLeft: `${dataIndex * 16}px`
        }">
          <el-checkbox v-model="item.isHavePermission" :indeterminate="item.isIndeterminate"
            @change="changeMenu(item)">{{
              item.menuName }}</el-checkbox>
        </div>
      </div>
      <div class="td">
        <ul class="button">
          <li v-for="button in item.buttons">
            <el-checkbox v-model="button.isHavePermission" @change="changeButton(item)">{{ button.buttonName
              }}</el-checkbox>
            <el-icon @click='copyBtn(button)'>
              <CopyDocument />
            </el-icon>
          </li>
        </ul>
      </div>
      <div class="td">
        <el-link @click="isLook(item)">仅查看</el-link>
      </div>
    </div>
    <PermissionBoxItem :data="item.chrildren" :fatherData="item" :dataIndex="dataIndex + 1"
      v-if="item.chrildren && item.chrildren.length > 0" @changeBtn="changeBtn" />

  </template>
</template>

<script setup lang="ts">
import PermissionBoxItem from './PermissionBoxItem.vue'; // 引入逻辑
const { proxy } = getCurrentInstance() as any;
const props = withDefaults(
  defineProps<{
    data?: any; //主数据
    dataIndex?: number; //主数据
    fatherData?: any; //父级数据
  }>(),
  {
    dataIndex: 0,
  },
);
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'changeBtn'): void;
}>();
const copyBtn = (button: any) => {
  proxy.$clickOrDoubleClick(() => {
    proxy.$copy(`permission:'${button.buttonCode}',`, true)
  }, () => {
    proxy.$copy('v-permission="`' + button.buttonCode + '`"', true)
  })
};
const changeBtn = () => {
  let _fatherData = props.fatherData
  if (_fatherData) {
    const count = _fatherData.chrildren.reduce((number: any, el: any) => {
      return el.isHavePermission ? number + 1 : number;
    }, 0);
    _fatherData.count = count
    _fatherData.isHavePermission = count > 0
  }
  emit('changeBtn');
};
//选择按钮
const changeButton = (row: any) => {
  if (row.buttons) {
    //计算按钮选中数量
    const count = row.buttons.reduce((number: any, el: any) => {
      return el.isHavePermission ? number + 1 : number;
    }, 0);
    row.count = count
    row.isHavePermission = count > 0
  }
  changeBtn()
}
//选择菜单
const changeMenu = (row: any) => {
  setButton(row, row.isHavePermission)
  setMenu(row.chrildren, row.isHavePermission)
  changeBtn()
}
//设置按钮是否选中
const setButton = (row: any, isHavePermission: boolean) => {
  if (row.buttons && row.buttons.length > 0) {
    row.buttons = row.buttons.map((el: any) => ({
      ...el,
      isHavePermission: isHavePermission
    }))
  }
}
//设置菜单选中
const setMenu = (arr: any, isHavePermission: boolean) => {
  if (arr && arr.length > 0) {
    arr.forEach((el: any) => {
      el.isHavePermission = isHavePermission
      setButton(el, isHavePermission)
      setMenu(el.chrildren, isHavePermission)
    });
  }
}
//仅查看
const isLook = (row: any) => {
  setButton(row, false)
  row.isHavePermission = true
  changeBtn()
}
</script>